<template>
  <div class="department">
    <a-card class="general-card">
      <!-- <FormHeader v-if="showSearchBar" :collection="collection" @tap-date="tapDate"></FormHeader> -->
      <a-form class="formHeader">
        <a-row justify="start" :gutter="24">
          <a-col class="formHeader-criteria">
            <a-row :gutter="16">
              <a-col span="8">
                <a-form-item label="单号" label-col-flex="80px">
                  <a-input v-model="checkFrom.td002" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="工单单号" label-col-flex="80px">
                  <a-input v-model="checkFrom.te007" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="员工名称" label-col-flex="80px">
                  <a-input v-model="checkFrom.mv002" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="品号" label-col-flex="80px">
                  <a-input v-model="checkFrom.cd004" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="生产日期" label-col-flex="80px">
                  <a-range-picker style="width: 100%; marginbottom: 20px" @change="onChange" @select="onSelect" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="formHeader-btn">
            <a-space direction="vertical" :size="20">
              <a-button type="primary" @click="init">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <formButtonGroup
        v-model:columns="columns"
        v-model:size="size"
        :config="config"
        :search-bar="searchBar"
        @refresh="init"
        @change-search-bar="changeSearchBar"
      >
        <template #leftboon>
          <a-button type="primary" @click="gotoPrint">进入扫码检验</a-button>
        </template>
      </formButtonGroup>
      <a-table
        :columns="columns"
        :data="tabelList"
        :pagination="pagination"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #optional="{ record }">
          <a-space>
            <a-button size="mini" type="primary" @click="viewDetails(record)">查看详情</a-button>
            <!-- <a-button size="mini" @click="viewInspect">检验</a-button> -->
          </a-space>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:visible="editVisible" title="编辑" title-align="start" @ok="handleOk" @cancel="handleCancel">
      <EditForm :gathering="collection"></EditForm>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './incomingInspection';
import FormHeader from '@com/formHeader/formHeader.vue';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import EditForm from '@com/editForm/editForm.vue';

export default {
  name: 'IncomingInspection',
  components: {
    FormHeader,
    formButtonGroup,
    EditForm,
  },
  setup() {
    const { base, columns, collection, handlePageChange, handlePageSizeChange, viewInspect, viewDetails, init, gotoPrint } = importConfig();
    init();
    return {
      ...toRefs(base),
      columns,
      collection,
      handlePageChange,
      handlePageSizeChange,
      viewInspect,
      viewDetails,
      init,
      gotoPrint,
    };
  },
};
</script>

<style scoped lang="less">
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
}
.formHeader {
  &-criteria {
    flex: 1 1 0;
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
</style>
